

<template>

  <div>
    <div style="background-color:#B0E0E6;padding:10px 0 0;border-radius:4px;position:relative;">
      <Row>
        <Col span="24">
        <Button class="top-right-btn" size="large" icon="plus" @click="addItem" v-has="'add'">添加</Button>
        <Poptip width="400" title='搜索' placement="bottom-end" class="top-btn">
          <Button type="primary" size="large" icon="ios-search">搜 索</Button>
          <div style="text-align:center" slot="content">
            <Form ref="searchForm" :model="searchForm" :label-width="80" value=true style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;">
              <Row>
                <Form-item label="子单位名称">
                  <Input v-model="searchForm.name"></Input>
                </Form-item>
             <Form-item label="所属联网单位">
            <Cascader :data="areaGcData" v-model="areaGcDataArr" :filterable="true" transfer placeholder="联网单位"></Cascader>
          </Form-item>
              </Row>
            </Form>
            <Row>
              <Button style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff" size="small" @click="doSearchTableList">确定</Button>
              <Button style="float:right;margin-top:10px;" size="small" @click="resetSearch">重置</Button>
            </Row>
          </div>
        </Poptip>
        </Col>
      </Row>
    </div>
    <!--table-->
    <Row>
      <Table stripe size="small" :columns="tableColums" :data="tableData"></Table>
    </Row>
    <Row>
      <Page :total="total" :current="currentPage" @on-change="changeCurrentPage" show-total style="float:right;margin-top:10px"></Page>
    </Row>
    <!--新增编辑-->
    <buildingsForm :modalShow="formShow" :modalFormTitle="formTitle" :parentForm="parentForm" @listenModalForm="hideModel" @refreshTableList="getTableList">
    </buildingsForm>
    <!--是否删除框-->
    <Modal v-model="delModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="btnLoading" @click="comfirmDel">删除</Button>
      </div>
    </Modal>
    <Modal title="责任书" v-model="visible">
      <img :src="dutypath" v-if="visible" style="width: 100%">
      <div slot="footer">
      </div>
    </Modal>
  </div>

</template>

<script>
import Cookies from "js-cookie";
import { getBuildingsAll, delBuilding,  areasBuildingsCascader, } from "@/api/getData";
import { clearObj } from "@/libs/util";
import { baseUrl } from "./../../../api/env";
import buildingsForm from "./buildingsForm.vue"

export default {
  name: "buildingsManager",
  components: {
    buildingsForm
  },
  data() {
    return {
      tableColums: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "子单位名称",
          key: "name"
        },
         {
          align: "center",
          title: "所属联网单位",
          key: "groupName"
        },
         {
          align: "center",
          title: "所属区域",
          key: "depName"
        },
        {
          align: "center",
          title: "地址",
          key: "addr"
        },
        {
          align: "center",
          title: "联系电话",
          key: "managerMobile"
        },
        {
          align: "center",
          title: "联系人",
          key: "managerName"
        },
        {
          align: "center",
          title: "微信名称",
          key: "wxName"
        },
        {
          align: "center",
          title: "微信头像",
          key: "wxImage",
          render:(h,params)=>{
            let imgUrl =  params.row.wxImage;
            if(!imgUrl){
              return "";
            }
            return h("img", {
                attrs: {
                  src: imgUrl
                },
                style: {
                  width: "30px",
                  height: "30px"
                }
              });
          }
        },
        {
          align: "center",
          title: "责任书",
          minWidth: 80,
          key: "dutyLetter",
          render: (h, params) => {
            let imgSrc = params.row.dutyLetter;
            if (imgSrc) {
              imgSrc = baseUrl + imgSrc;
              return h("img", {
                attrs: {
                  src: imgSrc
                },
                on: {
                  click: () => {
                    this.handleView(imgSrc);
                  }
                },
                style: {
                  width: "30px",
                  height: "30px"
                }
              });
            }
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let actions = [];
            if (this.$route.meta.actions.find(i => i === "manage")) {
              actions.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.manageItem(params.row);
                      }
                    }
                  },
                  "管理"
                )
              );
            }
            if (this.$route.meta.actions.find(i => i === "edit")) {
              actions.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "warning",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editItem(params.row);
                      }
                    }
                  },
                  "修改"
                )
              );
            }
            if (this.$route.meta.actions.find(i => i === "del")) {
              actions.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.delItem(params.row.id);
                      }
                    }
                  },
                  "删除"
                )
              );
            }

            return h("div", actions);
          }
        }
      ],
      areaGcData: [],
      areaGcDataArr: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      formShow: false,
      formTitle: "添加子单位",
      parentForm: {
        id: "",
        name: "",
        addr: "",
        managerName: "",
        managerMobile: "",
        dutyLetter:"",
        lat:"",
        lng:'',
      },
      dutypath:"",
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        name: "",
        rows: 10,
        page: 1,
        areaGcbd:[],
      },
      visible:false,
      buildingTableShow: false,
      groupCompanyId: 0,
      departmentId: 0,
      buildingTableTitle: ""
    };
  },
  computed: {
    UserId: function() {
      return Cookies.get("userId");
    }
  },
  created() {},
  mounted() {
    this.getTableList();
    this.getAreasBuildingsCascader();
  },
  methods: {
    resetSearch() {
      this.searchForm.name = "";
      this.areaGcDataArr=[];
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.searchForm.page = this.currentPage - 1;
      if(this.areaGcDataArr.length<1){
        this.searchForm.areaGcbd=0;
      }else{
        var arr = this.areaGcDataArr;
        this.searchForm.areaGcbd = arr[arr.length-1];
      }
      const params = this.searchForm;
      console.log(params);
      const result = await getBuildingsAll(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.data;
      }
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    addItem() {
      clearObj(this.parentForm);
      this.formTitle = "添加子单位";
      this.formShow = true;
    },
    editItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row));
      this.formTitle = "修改子单位";
      this.formShow = true;
    },
    delItem(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      
      try {
        const res = await delBuilding({ id: this.delId });
        if (res.code == 0) {
          this.getTableList();
          this.delModal = false;
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    },
    manageItem(row) {
      this.groupCompanyId = row.id;
      this.departmentId = row.departmentId;
      this.buildingTableTitle = `[${row.groupName}]-子单位列表`;
      this.buildingTableShow = true;
    },
    hideBuildingTable() {
      this.buildingTableShow = false;
    },
    async getAreasBuildingsCascader() {
      let res = await areasBuildingsCascader({ allData: false });
      if (res.code == 0) {
        this.areaGcData = res.data;
      }
    },
    handleView(img) {
      this.dutypath = img;
      this.visible = true;
    }
  }
};
</script>
